<template>
    <div style="display: flex;">
        <div :style="{width:( isCollapse ? '64px': '208px')}">
            <el-menu
                background-color="#3c82f5"
                style="width:100%;height:100%;min-height:100vh;"
                text-color="#fff"
                active-text-color="#ff0"
                :collapse="isCollapse"
                :collapse-transition="false"
                unique-opened router
                @select="selectMenu"
            >
                <el-row style="padding-top: 10px;">
                    <el-col :span="2">
                    </el-col>
                    <el-col :span="7" style="padding-left:7px;">
                        <el-avatar src="/img/bagualogo.webp"
                                   style="width:35px;height:35px;margin-top: 6px;"></el-avatar>
                    </el-col>
                    <el-col :span="isCollapse ? 0 : 13">
                        <router-link to="/"
                                     style="color:#fff;text-decoration:none;position:relative;top:15px;left:2px;font-weight: bold;">
                            周易测运
                        </router-link>
                    </el-col>
                    <el-col :span="2">
                    </el-col>
                </el-row>
                <el-sub-menu index="1" style="width: 100%;">
                    <template #title>
                        <el-icon style="font-size:21px;">
                            <User/>
                        </el-icon>
                        <span>用户管理</span>
                    </template>
                    <el-menu-item index="/user" >用户列表</el-menu-item>
                </el-sub-menu>

                <el-sub-menu index="2" style="width: 100%;">
                    <template #title>
                        <el-icon style="font-size:21px;">
                            <Van/>
                        </el-icon>
                        <span>角色管理</span>
                    </template>
                    <el-menu-item index="/role">角色列表</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="3" style="width: 100%;">
                    <template #title>
                        <el-icon style="font-size:21px;">
                            <Place/>
                        </el-icon>
                        <span>部门管理</span>
                    </template>
                    <el-menu-item index="/department">部门列表</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="4" style="width: 100%;">
                    <template #title>
                        <el-icon style="font-size:21px;">
                            <Location/>
                        </el-icon>
                        <span>菜单管理</span>
                    </template>
                    <el-menu-item index="/menu">菜单列表</el-menu-item>
                </el-sub-menu>
            </el-menu>
        </div>
        <div :style="{width:( isCollapse ? 'calc(100% - 64px)': 'calc(100% - 208px)')}">
            <el-header style="background-color:#fff;padding-top:22px;height:10vh;">
                <!--5.1 折叠图标与退出登录-->
                <el-row :gutter="10">
                    <el-col :span="18">
                        <el-icon style="font-size:20px;position:relative;top:3px;" @click="changeCollapsed"><Expand/></el-icon>
                    </el-col>
                    <el-col :span="6" style="position: relative;">
                        <el-dropdown trigger="click" style="position:absolute;right:20px;">
                                     <span style="font-size:19px;font-weight: bold;">
                                         {{user.username}}
                                         <el-icon><arrow-down/></el-icon>
                                     </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </el-col>
                </el-row>
                <!--5.2 面包屑导航-->
                <el-breadcrumb separator="/" style="position: relative;top:20px;">
                    <el-breadcrumb-item>首页</el-breadcrumb-item>
                    <el-breadcrumb-item v-for="item in breadCrumb">{{item}}</el-breadcrumb-item>
                </el-breadcrumb>
            </el-header><br>
            <!--                        6.右侧:主体内容是可变区域！-->
            <el-main style="padding:0;min-height:90vh;overflow-y: auto;">
                <router-view/>
            </el-main>
        </div>
    </div>
</template>

<script setup>
import {ref} from "vue";

const isCollapse = ref(false);
//修改折叠状态
const changeCollapsed = () => {
    isCollapse.value = !isCollapse.value;
}
//获取登录的用户信息
const user = ref(getUser());
//获取登录的用户信息
// const user = ref(getUser());{{ user.username }}
//退出登录功能
const logout = () => {
    if (confirm('确定要退出吗？')) {
        localStorage.removeItem('user');
        //退出时也需要将面包屑的值清空！
        localStorage.removeItem('breadcrumb');
        window.location.href = '/login';
        user.value = '';
    }
}
const breadCrumb = ref(JSON.parse(localStorage.getItem('breadcrumb') || '["用户管理", "用户列表"]'));
let map = {
    '/user':['用户管理','用户列表'],
    '/role':['角色管理','角色列表'],
    '/department':['部门管理','部门列表'],
    '/menu':['菜单管理','菜单列表']
}
//选择菜单项时触发
const selectMenu = (index) => {
    //根据选择的菜单项设置面包屑导航的值
    breadCrumb.value = map[index];
    //将值存入localStorage中,防止刷新页面时数据丢失
    localStorage.setItem('breadcrumb', JSON.stringify(breadCrumb.value));
};
</script>